<template>
  <!-- 我的积分页面 -->
  <div class="box">
    <div class="integral_top">
      <span class="left">{{data_time}}</span>
      <span
        class="right"
        style="width:20px;display:inline-block"
        @click="show_time"
      >
        <img
          style="width:100%"
          src="@/static/img/icon/日历.png"
        >
      </span>
    </div>
    <div class="integral_top_title">
      <p>总得分({{D_name}})</p>
      <p v-if="list.length==0">0</p>
      <p v-else>{{Number(list.codeG)+list.codeD}}</p>
    </div>
    <div class="integral_content">
      <div>
        <p>当月{{D_name}}</p>
        <p v-if="list.length==0">0</p>
        <p v-else>{{list.codeD}}</p>
        <p @click="shoeLook">查看明细</p>
      </div>
      <div>
        <p>固定分({{D_name}})</p>
        <p v-if="list.length==0">0</p>
        <p v-else>{{list.codeG}}</p>
        <p @click="showIntegralD">查看明细</p>
      </div>
      <div>
        <p>考勤分</p>
        <p v-if="list.length==0">0</p>
        <p v-else>{{list.codeK}}</p>
        <p @click="showAttendance">查看明细</p>
      </div>
    </div>
    <div
      class="integral_C_branch"
      v-if="ISC == 1"
      @click="showIntergralC"
    >
      <span class="left">{{C_name}}</span>
      <span class="right">当月总分:
      <span v-if="list.length==0">0
        <van-icon
          name="arrow"
          :style="{float:'right',margin:'0px 2vw ',fontSize:'17px',lineHeight:'45px',color:'#969799'}"
        />
      </span>
      <span v-else>{{list.codeC}} <van-icon
          name="arrow"
          :style="{float:'right',margin:'0px 2vw ',fontSize:'17px',lineHeight:'45px',color:'#969799'}"
        /></span>
        </span>
    </div>
    <div
      class="integral_D_branch"
      @click="showIntergralD"
    >
      <span class="left">福分</span>
      <span class="right">当月总分:
      <span v-if="list.length==0">0
        <van-icon
          name="arrow"
          :style="{float:'right',margin:'0px 2vw ',fontSize:'17px',lineHeight:'45px',color:'#969799'}"
        />
      </span>
      <span v-else>{{list.codeF}} <van-icon
          name="arrow"
          :style="{float:'right',margin:'0px 2vw ',fontSize:'17px',lineHeight:'45px',color:'#969799'}"
        /></span>
        </span>
    </div>
    <div
      class="integral_D_branch"
      @click="showIntergral_yuanbao"
      v-if="auth.corp_auth == 1"
    >
      <span class="left">元宝</span>
      <span class="right">当前余额:
      <span v-if="auth.corp_auth == 0">0  <van-icon
          name="arrow"
          :style="{float:'right',margin:'0px 2vw ',fontSize:'17px',lineHeight:'45px',color:'#969799'}"
        /></span>
      <span v-else>{{balance.remain}}
         <van-icon
          name="arrow"
          :style="{float:'right',margin:'0px 2vw ',fontSize:'17px',lineHeight:'45px',color:'#969799'}"
        />
      </span>
      </span>
    </div>
    <van-popup
      v-model="time"
      :safe-area-inset-bottom="true"
      :style="{width:'86%',fontSize:'14px',borderRadius:'10px'}"
      :overlay-style="{background:'rgba(0, 0, 0, 0.34)'}"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="getTime"
        @cancel="time=false"
      />
    </van-popup>
  </div>
</template>

<script type="text/javascript">
import { Icon, DatetimePicker, Popup } from "vant";
export default {
  data() {
    return {
      list: [],
      time: false,
      balance: {},
      auth: {},
      minDate: new Date(2018, 0),
      maxDate: new Date(),
      currentDate: new Date(),
      data_time: "",
      D_name: "",
      C_name: "",
      ISC:''
    };
  },
  components: {
    [Icon.name]: Icon,
    [DatetimePicker.name]: DatetimePicker,
    [Popup.name]: Popup
  },
  created() {
    this.C_name = localStorage.getItem("c_name");
    this.D_name = localStorage.getItem("d_name");
    this.getIsC();
    this.dataTime();
    this.getMyPalance();
    dd.biz.navigation.setTitle({
      title: "我的积分" //控制标题文本，空字符串表示显示默认文本
    });
  },
  methods: {
    /**
     * rfj
     * 积分接口
     */
     //C分开关
    async getIsC(){
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getIsC?corpId=${corpId}`
      );
      // localStorage.setItem("ISC", res.data.data.is_c_code);
      this.ISC = res.data.data.is_c_code
    },
    dataTime() {
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let month;
      if (mm < 10) {
        month = "0" + mm;
      } else {
        month = mm;
      }
      let year = yy + "-" + month;
      this.data_time = year;
      this.getMyPoints(yy, month);
    },
    show_time() {
      this.time = true;
    },
    getTime(time) {
      const d = new Date(time);
      let yy = d.getFullYear();
      let mm = this.p(d.getMonth() + 1);
      const resDate = d.getFullYear() + "-" + this.p(d.getMonth() + 1);
      this.data_time = resDate;
      this.getMyPoints(yy, mm);
      this.time = false;
    },
    p(s) {
      return s < 10 ? "0" + s : s;
    },
    async getMyPoints(yy, mm) {
        let corpId = localStorage.getItem("custid");
      let userId = localStorage.getItem("userId");
      const res = await this.$http.get(
        `yuepoints/myPoints?corpId=${corpId}&userId=${userId}&year=${yy}&month=${mm}`
      );
      this.list = res.data.data;
    },
    async getMyPalance() {
        let corpId = localStorage.getItem("custid");
      let userId = localStorage.getItem("userId");
      const res = await this.$http.post(
        `yuepoints/tmall/balance?corpId=${corpId}&userId=${userId}`
      );
      this.balance = res.data.data;
      this.auth = res.data.data.auth;
    },
    shoeLook() {
      this.$router.push("/awardDeduction");
    },
    showAttendance() {
      this.$router.push("/attendance");
    },
    showIntegralD() {
      this.$router.push("/integralD");
    },
    showIntergralC() {
      this.$router.push("/my_c");
    },
    showIntergralD() {
      this.$router.push("/blessings");
    },
    showIntergral_yuanbao() {
      this.$router.push("/yuanbao");
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 18px;
  background: #f8f8fa;
  p {
    margin: 0px;
    padding: 0px;
  }
  .integral_top {
    padding: 0px 20px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #c0c0c059;
    color: #0072ffe0;
    background: #fff;
  }
  .integral_top_title {
    padding: 50px 0px;
    background: #fff;
  }
  .integral_content {
    background: #fff;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #c0c0c059;
    border-top: 1px solid #c0c0c059;
    font-size: 15px;
    div {
      margin: 0px auto;
      padding: 5px;
      p:last-child {
        color: #0072ffe0;
      }
    }
    div:nth-child(2) {
      width: 36vw;
      border-left: 1px solid #c0c0c059;
      border-right: 1px solid #c0c0c059;
    }
  }
  .integral_C_branch,
  .integral_D_branch {
    font-size: 15px;
    height: 45px;
    line-height: 45px;
    background: #fff;
    margin: 15px 0px;
    padding-left: 15px;
    // border-top:1px solid silver ;
    // border-bottom: 1px solid silver;
    // span:nth-child(2) {
    //   margin-left: 48vw;
    // }
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }
}
</style>
